<template>
	<view class="local-circles-container">
		<!-- 1. 热门话题 -->
		<view class="section hot-topics">
			<view class="section-title">
				
				<!-- #ifndef MP-WEIXIN -->
				<view class="indexIconFont">
					<u-icon name="/static/index/featured/icon_rmht.png" size="28" color="#000000" bold></u-icon>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<text class="indexIconFont icon-bdqz-rmht"></text>
				<!-- #endif -->
				
				<text>热门话题</text>
			</view>
			<scroll-view class="topics-scroll" scroll-x="true" show-scrollbar="false">
				<view class="topics-list">
					<view class="topic-item" v-for="topic in hotTopics" :key="topic.id" @click="navigateToHotDetail(topic)">
						<image class="topic-image" :src="topic.image" mode="aspectFill"></image>
						<view class="topic-info">
							<text class="topic-title">{{ topic.title }}</text>
							<text class="topic-count">{{ topic.discussionCount }}+ 相关讨论</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 2. 探索本地圈 -->
		<view class="section explore-circles">
			<view class="section-title">
				
				<!-- #ifndef MP-WEIXIN -->
				<view class="indexIconFont">
					<u-icon name="/static/index/featured/icon_tsbdq.png" size="28" color="#000000" bold></u-icon>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<text class="indexIconFont icon-bdqz-tz"></text>
				<!-- #endif -->
				
				<text>探索本地圈</text>
			</view>
			<view class="explore-list">
				<view class="explore-item" v-for="item in exploreList" :key="item.id" @click="navigateToDetail(item)">
					<view class="user-header">
						<u-avatar :src="item.user.avatar" size="30"></u-avatar>
						<text class="user-name">{{ item.user.name }}</text>
						<text class="message-count">{{ item.messageCount }}+条留言</text>
					</view>
					<view class="explore-content">
						<image class="content-image" :src="item.image" mode="aspectFill"></image>
						<view class="content-text">
							<text class="content-title">{{ item.title }}</text>
							<text class="content-description">{{ item.description }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
        
        <!-- 加载更多状态 -->
        <u-loadmore :status="loadStatus" marginTop="0" :line="true"   />
	</view>
</template>

<script>
export default {
	name: "LocalCircles",
	props: {
		hotTopics: {
			type: Array,
			default: () => []
		},
		exploreList: {
			type: Array,
			default: () => []
		},
        loadStatus: {
            type: String,
            default: 'loadmore'
        }
	},
	methods: {
		// 跳转到详情页的方法
		navigateToDetail(item) {
			uni.navigateTo({
				// 跳转到新创建的页面
				url: '/pages_sub/index/local-circles-detail/local-circles-detail',
				success: (res) => {
					// 通过 eventChannel 向新页面传递数据
					res.eventChannel.emit('acceptDataFromCirclePage', { item: item });
				},
				fail: (err) => {
					console.error("跳转失败:", err);
				}
			});
		},
		navigateToHotDetail(item) {
			uni.navigateTo({
				// 跳转到新创建的页面
				url: '/pages_sub/index/local-circles-hot-detail/local-circles-hot-detail',
				success: (res) => {
					// 通过 eventChannel 向新页面传递数据
					res.eventChannel.emit('acceptDataFromCirclePage', { item: item });
				},
				fail: (err) => {
					console.error("跳转失败:", err);
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.local-circles-container {
	background-color: #f8f8f8;
	padding-bottom: 20rpx;
}

.section {
	padding: 30rpx 30rpx 0;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
	.indexIconFont{
		margin-right: 10rpx;
	}
	.title-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 12rpx;
	}
	.icon-bdqz-tz{
		color: #FF5D50;
		font-size: 60rpx;
	}
	.icon-bdqz-rmht{
		color: #FF7469;
		font-size: 50rpx;
	}
	text {
		font-size: 34rpx;
		font-weight: bold;
		color: #303133;
	}
}

.hot-topics {
	.topics-scroll {
		width: 100%;
		white-space: nowrap;
	}
	.topics-list {
		box-sizing: border-box;
	}
	.topic-item {
		display: inline-block;
		width: 300rpx;
		height: 220rpx;
		margin-right: 20rpx;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
		.topic-image {
			width: 100%;
			height: 100%;
		}
		.topic-info {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 40rpx 16rpx 16rpx; 
			color: #fff;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); 
			display: flex;
			flex-direction: column; 
			justify-content: flex-end; 
			height: 100%; 
			box-sizing: border-box;
			.topic-title {
				font-size: 28rpx; 
				font-weight: 500;
				color: #FFFFFF;
				white-space: normal; /* 允许换行 */
				line-height: 1.4;
				
				/* (关键新增) 多行省略号效果 */
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; /* 限制为两行 */
				-webkit-box-orient: vertical;
				margin-bottom: 8rpx; /* 与下方讨论数拉开距离 */
			}
			.topic-count {
				font-size: 20rpx;
				opacity: 0.8;
			}
		}
	}
}

.explore-circles {
	.explore-list {
		.explore-item {
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			// border-top: 1rpx solid #f0f0f0;
			margin-bottom: 20rpx;
			&:first-child {
				border-top: none;
			}
			.user-header {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.user-name {
					margin-left: 16rpx;
					font-size: 28rpx;
					color: #333;
					flex-grow: 1;
				}
				.message-count {
					font-size: 24rpx;
					color: #999;
				}
			}
			.explore-content {
				display: flex;
				.content-image {
					width: 240rpx;
					height: 180rpx;
					border-radius: 12rpx;
					margin-right: 24rpx;
					flex-shrink: 0;
				}
				.content-text {
					flex: 1;
					display: flex;
					flex-direction: column;
					min-width: 0;
					.content-title {
						font-size: 30rpx;
						font-weight: 500;
						color: #333;
						margin-bottom: 10rpx;
					}
					.content-description {
						font-size: 26rpx;
						color: #666;
						line-height: 1.6;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
}
</style>